<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>教师信息</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <style scoped>
        .table th, .table td {
            text-align: center;
        }
        .pagination {
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>教师信息</h2>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>邮箱</th>
            <th>电话</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="teacherTableBody">
        </tbody>
    </table>

    <nav>
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#" id="prevPage">上一页</a></li>
            <li class="page-item"><a class="page-link" href="#" id="nextPage">下一页</a></li>
        </ul>
    </nav>
</div>

<script>
    $(document).ready(function() {

        var page = 1;
        var size = 10;

        function loadTeachers(page, size) {
            $.ajax({
                url: 'http://localhost:8081/studen_manage_war_exploded/teachers/' + page +'/'+ size,
                type: 'GET',
                dataType: 'json',
                success: function(result) {
                    var teachers = result.data;
                    var teachersTableBody = $('#teacherTableBody');
                    teachersTableBody.empty();
                    $.each(teachers, function(index, teacher) {
                        var gender = teacher.gender === 1 ? '男' : '女';
                        var row = '<tr>' +
                            '<td>' + teacher.teacherId + '</td>' +
                            '<td>' + teacher.teacherName + '</td>' +
                            '<td>' + gender + '</td>' +
                            '<td>' + teacher.email + '</td>' +
                            '<td>' + teacher.phone + '</td>' +
                            '<td>' + teacher.address + '</td>' +
                            '<td><button class="btn btn-primary btn-sm">编辑</button> ' +
                            '<button class="btn btn-danger btn-sm" @click="deleteTeacher(teacher.teacherId)">删除</button></td>' +
                            '</tr>';
                        teachersTableBody.append(row);
                    });
                }
            });
        }
        function deleteTeacher(teacherId) {
            $.ajax({
                url: 'http://localhost:8081/studen_manage_war_exploded/teachers/deleteTeacher/' + teacherId,
                type: 'DELETE',
                success: function(result) {
                    loadTeachers(page, size);
                }
            });
        }
        $('#teacherTableBody').on('click', '.btn-danger', function() {
            var teacherId = $(this).closest('tr').find('td:first').text(); // Get the teacher ID from the row
            deleteTeacher(teacherId); // Call the deleteTeacher function with the teacher ID
        });

        $('#prevPage').click(function(e) {
            e.preventDefault();
            if (page > 1) {
                page--;
                loadTeachers(page, size);
            }
        });

        $('#nextPage').click(function(e) {
            e.preventDefault();
            page++;
            loadTeachers(page, size);
        });

        loadTeachers(page, size);

    });
</script>
</body>
</html>
